// 封装随机公式
function random(max,min){
  return  Math.floor(Math.random()*(max-min+1)+min)
}

// 全局变量
var wscObj=document.querySelector('.wsc')
var score=0
var wscLeft=0
var wscTop=(window.innerHeight||document.documentElement.clientHeight)-wscObj.offsetHeight
// --------------------------------------------------------------------------


// 随机出现食物
// 1.设置间隔定时器,每隔1s掉下来一个食物
function footTfn() {
    // foodT只是代表这个定时器,方便清除这个定时器,不是函数
    foodT=setInterval(function(){
        // 1.2造图片img
        var imgObj=document.createElement('img')
        // 食物出现的概率  probability 概率
        var prob=random(1,10)
        var arr=[2,8]  //出现冠军
        if(arr.includes(prob)){   //如果概率里面2,8是冠军的话,就追加冠军图片
            imgObj.className='food guanjun'
            imgObj.src='./imgs/guanjun.jpg'
        } else{
            imgObj.className='food hotdog'
            imgObj.src='./imgs/hotdog.jpg'
        }
    
        // 1.3吧食物和冠军图片随机出现的位置 最大值和最小值
        var min=0
        var max=(window.innerWidth||document.documentElement.clientWidth)-imgObj.offsetWidth
        // 1.4设置图片的位置
        imgObj.style.top='0px'
        imgObj.style.left=random(max,min)+'px'
        // 1.5追加图片到页面中
        document.body.appendChild(imgObj)
    
    },1000)
}
// 一定要首次调用一下才能实现
// footTfn代表整个定时器函数
footTfn() 


// ----------------------------------------------------------------------------
// 食物随机掉落 
// 1.设置间隔定时器,每隔多久食物掉下来
function food1Tfn(){
    food1T=setInterval(function(){
        // 1.2定时器处理函数中-获取所有的食物图片(热狗和冠军)
        var foodObj=document.querySelectorAll('.food')
        // 1.3遍历
        foodObj.forEach(function(item,i){   //item是一个个图片
        // 1.3.1设置每个图片每100ms掉落下来的距离,及掉落范围
          var topObj=parseInt(item.style.top)+1   //设置每次掉落1px
          var maxTop=(window.innerHeight||document.documentElement.clientHeight)-item.offsetHeight
          //1.3.2判断掉落的位置,如果掉落的位置超出最大的高度,就移除,没超出就重置 
          if(topObj>maxTop){
              document.body.removeChild(item)
    
          } else{
    item.style.top=topObj+'px'
          }
        //  1.3.3判断王思聪是否吃到食物
        // 思路:
        // 1.食物在横轴和竖轴上都要在王思聪图片的范围内
        // 2.王思聪图片X轴距离< 食物X轴距离<王思聪图片X轴距离+王思聪图片自身宽度
        // 3.   食物Y轴距离+食物自身高度>王思聪图片Y轴距离
        // 4.都符合的情况下 分数加1,吃食物也加1, 并且清除这个图片
    
        // 1.获取食物在X轴(left)和在Y轴(top)的距离
        var foodLeft=parseInt(item.style.left)
        var foodTop=parseInt(item.style.top)+item.offsetHeight
        // 2王思聪高度宽度  (下面已经重置) wscLeft=leftObj  wscTop
        // 3判断
        if((foodLeft>wscLeft)&&(foodLeft<wscLeft+wscObj.offsetWidth)&&(foodTop>wscTop)){
            
            // 创建得到的分数
            var  showscoreObj=document.createElement('div')
            showscoreObj.className='show-score'
            var temp = 0
            // 判断吃到的是热狗还是冠军
            if(item.className=='food guanjun'){
                showscoreObj.innerText='+5'
                temp = 5
            } else{
                showscoreObj.innerText='+1'
                temp = 1
            }
             // 总分数   数值型才会累计
            score+= temp
            document.querySelector('.game-score h1:nth-of-type(2)').innerText=score+'分'
    
            // 同步加分的位置  和王思聪图片一致
            showscoreObj.style.position='absolute'
            showscoreObj.style.left=wscLeft+wscObj.offsetWidth+'px'
            // 追加到页面中
            document.body.appendChild(showscoreObj)
            // 倒计时 再清除加分的
            setTimeout(function(){
                document.body.removeChild(showscoreObj)
            },1000)
            // 清除吃到的食物图片
            document.body.removeChild(item)
           
        }
    
        })
    },5)
}
food1Tfn()
// ----------------------------------------------------------------------------

// 设置王思聪图片的位置移动,方便吃热狗
// 1.给网页绑定鼠标移动事件
document.onmousemove=function(evt){
    // 1.2事件处理函数中-获取事件对象
    var e=evt||window.event
    // 1.3获取王思聪图片
    var wscObj=document.querySelector('.wsc')
    // 1.4设置鼠标的移动距离 (居中)
    var leftObj=e.clientX-wscObj.offsetWidth/2
    var maxLeft=(window.innerWidth||document.documentElement.clientWidth)-wscObj.offsetWidth
    
    // 1.5设置图片移动范围
    if(leftObj<0) leftObj=0
    if(leftObj>maxLeft) leftObj=maxLeft
    // 1.6同步图片的移动距离
    wscObj.style.left=leftObj+'px'
    // 1.7重置王思聪图片的高度宽度
    wscLeft=leftObj
}


// ###剩余时间设置
// 1.时间一开始是60
var time=10
function gameTfn(){
// 2.设置间隔定时器,每隔1秒,时间减少一秒
gameT=setInterval(function(){
    time--
    console.log(time);
    // 2.1获取游戏倒计时时间标签
    var gamescoreObj=document.querySelector('.game-score h1 span')
    // 2.2判断,如果倒计时时间>0,就把当时的时间放span里面,如果<0,就结束游戏
    if(time>=0){
        gamescoreObj.innerText=time
    } else{
        // 清除游戏倒计时
        clearInterval(gameT)
        // 清除游戏掉落定时器
       clearInterval(foodT)
        clearInterval(food1T)
        // 重置时间
        time=10
        // 游戏结束的话,就展示重新开始面板
        // 1.游戏结束面版显示
        var panelObj=document.querySelector('.play-panel')
        panelObj.style.display='block'
        panelObj.querySelector('.stop').style.display='block'
        
        
        // 2.同步获得的分数
        var scoreObj=document.querySelector('.play-panel .score')
        scoreObj.style.display='block'
        scoreObj.innerText=score+'分'
    }

},1000)
}
gameTfn()


// ##重新开始游戏
// 1.获取重新开始标签,绑定点击事件
var btnObj=document.querySelector('.play-panel .stop .btn')
btnObj.onclick=function(){
    // 1.1清空分数
    score=0
    document.querySelector('.game-score h1:nth-of-type(2)').innerText=score+'分'
    // 1.2开始游戏

    footTfn() 
    food1Tfn()
    gameTfn()
    
    // 1.2 面版隐藏
    var panelObj=document.querySelector('.play-panel')
        panelObj.style.display='none'
        panelObj.querySelector('.stop').style.display='none'
        panelObj.querySelector('.score').style.display='none'
       
       
}
